<style lang="scss">
.title {
    header {
        margin: 10px auto;

        div {
            background: #524d4d;
            // opacity: .6;
            color: white;
            width: 90%;
            height: 2.5rem;
            border-radius: 2rem;
            line-height: 2.5rem;
            text-align: center;
            font-size: .9rem;
        }

        span {
            padding: .3rem .5rem;
            background: #53ba27;
            border-radius: 1rem;
            font-size: .9rem;
        }
    }

    h2 {
        width: 95%;
        margin: 10px auto;
    }

    p {
        width: 95%;
        color: #999;
        font-size: 14px;

        span {
        span{
            margin-right: 5px;
        }
    }
}}

#container {
    img {
        width: 95%;
        min-height: 2rem;
    }
}

.dibu {
    width: 100%;
    height: 60px;
    background: #fff;
    position: fixed;
    bottom: 0;
    display: flex;
    z-index: 999;
    height: 5rem;
    background: #fff;
    position: fixed;
    bottom: 0;
    line-height: 5rem;
    display: flex;
    z-index: 999;

    // justify-content: space-around;
    .left {
        width: 50%;
        display: flex;
        justify-content: space-around;
        >div{
            text-align: center;
        }

        img {
            width: 25px;
            height: 25px;
        }
    }

    .right {
        width: 50%;

        button {
            width: 10rem;
            height: 2.5rem;
            line-height: 2.5rem;
            border: none;
            background-color: #53ba27;
            color: white;
            font-weight: 800;
            border-radius: 1.5625rem;
        }
    }

}
</style>
<template>
    <div class="title">
        <header>
            <div>
                关注公众号，每日医生直播义诊早知道~
                <span>立即前往</span>
            </div>
        </header>
        <h2>
            {{ detaillist.title }}
        </h2>
        <p>
            <span>{{ detaillist.date_str }}</span>
            <span>阅读:{{ detaillist.view_times }}</span>
        </p>
    </div>
    <div id="container" v-html="detaillist.content">

    </div>
    <div class="dibu">
        <div class="left">
            <div>
                <div v-if="zan" @click="zanclick">
                    <img src="../../assets/img/zan.png" alt="">
                </div>
                <div v-else @click="zanclick1">
                    <img src="../../assets/img/zan1.png" alt="">
                </div>
                <div>{{ detaillist.share_num }}</div>
            <div @click="zanclick">
                <div v-if="zan">
                    <img src="../../assets/img/zan.png" alt="">
                </div>
                <div v-else>
                    <img src="../../assets/img/zan1.png" alt="">
                </div>
            </div>
            <div>
                <div v-if="cang" @click="cangclick">
                    <img src="../../assets/img/cang.png" alt="">
                </div>
                <div v-else @click="cangclick1">
                    <img src="../../assets/img/cang1.png" alt="">
                </div>
                <div>{{ detaillist.favor_num }}</div>
            </div>
            <div @click="topinglun">
                <img src="../../assets/img/pinglun.png" alt="">
            </div>
        </div>
        <div class="right">
            <button>咨询医生</button>
        </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useCounterStore } from '@/stores/coun';
import { useRoute } from 'vue-router'
import { ref } from 'vue'
import axios from 'axios';
import router from '@/router';

const exampleStore = useCounterStore()

const route = useRoute()
const detaillist = ref([])
const zan = ref(true)
const cang = ref(true)
// const arr = ref([])
const arr = ref([{}])

const id = route.query.id
console.log(id);

const zanclick = () => {
    zan.value = false
    exampleStore.addzan(detaillist.value)
    console.log(exampleStore.arrzan);
    console.log(detaillist.value.favor_num);
    detaillist.value.share_num++
}

const zanclick1 = () => {
    zan.value = true
    detaillist.value.share_num--
    zan.value = !zan.value
}

const cangclick = () => {
    cang.value = false
    exampleStore.add(detaillist.value)
    console.log(exampleStore.arr);
    detaillist.value.favor_num++
    // localStorage.setItem('arr',JSON.stringify([detaillist.value]))
    if (!localStorage.getItem('arr')) {
        localStorage.setItem('arr', JSON.stringify([detaillist.value]))
    }
    // else {
    //     localStorage.setItem('arr', JSON.stringify(arr.value.push(detaillist.value)))
    // }
}

const cangclick1 = () => {
    cang.value = true
    detaillist.value.favor_num--
    localStorage.removeItem('cang')
}

const topinglun = () => {
    router.push('/pinglun')
}

async function listDetail() {
    const res = await axios.get(`/static/cooperation/wap/article/${id}/`, {
        params: {
            partner: 'chunyu_wap_mini',
            promote: '0',
        }
    })
    console.log(res.data);
    detaillist.value = res.data
}
listDetail()

</script>